<template>
	<!-- 医疗经营情况饼图 -->
	<div class="mngMedicalChartPage">
		<div class="chartBox" id="mngMedicalChart"></div>
	</div>
</template>

<script setup>
import { ref, reactive, onUnmounted } from "vue";
import echarts from "@/common/utils/echarts.js";
// import { budgetApi } from "@/api-dashboard/leaderApi";

const medicalChartRef = ref(null);
// 各项颜色
const colorsLineArr = ref([
	"#05CFF7",
	"#1978E5",
	"#EAB966",
	"#60B45E",
	"#BECDD0",
]);

// 图表 rich 所需数据格式转换
const changeRichData = () => {
	let result = {};
	colorsLineArr.value.forEach((v, i) => {
		result[`a${i}`] = {
			padding: [-11, 6, -20, 6],
			color: v,
			backgroundColor: "transparent",
			fontSize: 18,
		};
	});
	// result.num = {
	// 	fontSize: 15,
	// };
	return result;
};
// 图标配置项
const options = reactive({
	title: {
		show: false,
		text: "类 型\n占 比",
		textStyle: {
			color: "#fff",
			lineHeight: 25,
		},
		x: "27%",
		y: "40%",
	},
	legend: {
		orient: "vertical",
		top: "center",
		left: "55%",
		itemGap: 4,
		itemHeight: 12,
		itemWidth: 12,
		formatter: (params) => {
			// let aim = legendFomartDataArr.value.find((item) => item.name == params);
			// if (params.length > 5) {
			//   let str1 = params.substring(0, 5);
			//   let str2 = params.substring(5, params.length);
			//   return `{name|${str1}}\n{name|${str2}}{number|${aim.price}}{unit|万元}`;
			// }
			// return `{name|${params}} {number|${aim.price}}{unit|万元}`;
			return `{name|${params}}`;
		},
		textStyle: {
			lineHeight: 20,
			color: "#D3E3FF",
			rich: {
				// legend的过滤条件
				name: {
					fontSize: 12,
					fontFamily: "PingFang-SC-Regular",
				},
				number: {
					fontSize: 12,
					fontFamily: "DS-Digital-Bold",
					padding: [0, 0, 0, 4],
				},
				unit: {
					fontSize: 12,
				},
			},
		},
		selectedMode: false,
	},
	// graphic: {
	// 	elements: [
	// 		{
	// 			type: "circle",
	// 			shape: {
	// 				r: 60, //半径大小
	// 			},
	// 			style: {
	// 				fill: {
	// 					x: 1,
	// 					y: 1,
	// 					r: 1,
	// 					colorStops: [
	// 						{
	// 							offset: 1,
	// 							color: "rgba(50,171,241, .2)",
	// 						},
	// 						{
	// 							offset: 0.5,
	// 							color: "rgba(50,171,241, 0)",
	// 						},
	// 						{
	// 							offset: 0,
	// 							color: "rgba(50,171,241, .2)",
	// 						},
	// 					],
	// 				}, // 填充颜色
	// 			},
	// 			left: "21%",
	// 			top: "middle",
	// 		},
	// 	],
	// },
	series: [
		{
			type: "pie",
			radius: ["65%", "85%"],
			center: ["32%", "50%"],
			clockwise: true,
			avoidLabelOverlap: true,
			label: {
				show: false,
				position: "center",
				lineHeight: 20,
				formatter: function (params) {
					const name = params.name;
					const percent = params.percent + "%";
					const index = params.dataIndex;
					// return [`{a${index}|${name}：\n ${percent}}`];
					return [`{a${index}|${params.data.price}万元}`];
				},
				rich: changeRichData(),
			},
			itemStyle: {
				normal: {
					color: function (params) {
						return {
							type: "linear",
							x: 0,
							y: 0,
							x2: 1,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: "rgba(0,180,255,.05)", // 0% 处的颜色
								},
								{
									offset: 1,
									color: colorsLineArr.value[params.dataIndex], // 100% 处的颜色
								},
							],
							globalCoord: false, // 缺省为 false
						};
					},
				},
			},
			emphasis: {
				label: {
					show: true,
				},
			},
			data: [],
			cursor: "default",
		},
		{
			name: "阴影圈",
			type: "pie",
			radius: ["0", "55%"],
			center: ["32%", "50%"],
			emphasis: {
				scale: false,
				disabled: true,
			},
			tooltip: {
				show: false,
			},
			itemStyle: {
				color: {
					x: 1,
					y: 1,
					r: 1,
					colorStops: [
						{
							offset: 1,
							color: "rgba(50,171,241, .2)",
						},
						{
							offset: 0.5,
							color: "rgba(50,171,241, 0)",
						},
						{
							offset: 0,
							color: "rgba(50,171,241, .2)",
						},
					],
				},
			},
			zlevel: 4,
			labelLine: {
				show: false,
			},
			data: [100],
			cursor: "default",
		},
	],
});

// 请求数据，修改配置项
const legendFomartDataArr = ref([]);
let indexArr = ref([]);
let timer = null;
const initMedicalChart = (option) => {
	legendFomartDataArr.value = option;
	options.series[0].data = option;
	indexArr.value = option.map((item, i) => {
		return i;
	});
	if (!medicalChartRef.value) {
		medicalChartRef.value = echarts.init(
			document.getElementById("mngMedicalChart")
		);
	}
	let index = ref(0);
	funHandler(index, indexArr.value);
	medicalChartRef.value.on("mouseover", (e) => {
		if (e.dataIndex !== index.value) {
			medicalChartRef.value.dispatchAction({
				type: "downplay",
				seriesIndex: 0,
				dataIndex: e.dataIndex,
			});
		}
	});
	medicalChartRef.value.setOption(options);
	return medicalChartRef.value;
};

let funHandler = (index, indexArr) => {
	medicalChartRef.value.dispatchAction({
		type: "highlight",
		seriesIndex: 0,
		dataIndex: index.value,
	});
	timer = setInterval(() => {
		medicalChartRef.value.dispatchAction({
			type: "downplay",
			seriesIndex: 0,
			dataIndex: indexArr,
		});
		index.value++;
		if (index.value > indexArr.length - 1) {
			index.value = 0;
		}
		medicalChartRef.value.dispatchAction({
			type: "highlight",
			seriesIndex: 0,
			dataIndex: index.value,
		});
	}, 2000);
};

defineExpose({
	initMedicalChart,
});

onUnmounted(() => {
	clearInterval(timer);
	timer = null;
});
</script>

<style lang="scss" scoped>
.mngMedicalChartPage {
	width: 100%;
	height: 100%;
	.chartBox {
		width: 100%;
		height: 100%;
	}
}
</style>
